Savr Recipes
This is a case study about a modified GV style design sprint. I selected a project created collaboratively by Bitesize UX and Springboard, Savr Recipes. The product is a new startup whose goal is to make it easier for users to follow new recipes and create delicious meals at home.
Their current client base has some frustrations with the existing design and features. After gathering primary research from interviews with users it was concluded that there are three primary pain points of the product.
Role
This is considered a modified GV design sprint because it was carried out independently. I was the sole UX/UI designer, UX writer, and researcher. That being said I was still fortunate enough to have weekly critique and brainstorming sessions with my industry-expert mentor. Other than that there was very minimal collaboration and this was a definite constraint of the assignment.
Duration
As mentioned, this is a GV style design sprint. This means I spent 5 days working from start to finish with a whole day dedicated to each phase of the design process; map (empathize and define), sketch (ideate), decide, prototype, and test/validate.
Tools
Considering the time and team constraints of this project a lot of brainstorming and low fidelity designs were hand drawn. When it came time for wireframes and higher fidelity design Figma was used as the primary design software.
Problem Area
1.) When cooking new and particularly complex recipes users mentioned that steps often feel sprung on them without proper preparation. Side effects include needing to backtrack to improve timing or even having to hand wash a utensil that is needed elsewhere in the recipe.
2.) Naturally, new recipes include new techniques for most novice cooks. Unfortunately the product does not offer any instruction or explanation on technique. Interviewees admitted to often leaving the app whilst in the middle of a recipe to either Google or YouTube new techniques.
3.) The most common complaint is one found among most cooking apps and pertains to the constant need to refer to one’s device while cooking. Users are frustrated that they have to wash their hands constantly to check what step is next on their device and then again to return to sanitary cooking.
Questions (HMW: How might we?)
1.) How might we provide explicit information in order for the user to create a recipe successfully and with ease?
2.) How might we provide instruction on techniques pertaining to each step? How might we teach the user a new skill?
3.) How might we create an experience for the user to follow a recipe while not having to touch their phone as often?
Day 1 - MAP
Maps show the user on the left, their end goal on the right, and the steps they need to take to complete their goal are ordered chronologically in between.
The first day of the sprint revolved around the current state of the product, user’s thoughts and emotions surrounding its features and functions, and preliminary ideation for a solution in the form of a map (below).
The map from day one contains elementary design ideas. The novice chef must first choose a recipe to cook. Then they browse through the recipe viewing pertinent information regarding time, ingredients, utensils, etc.
The detailed steps portion is where the most redesign needed to take place considering most complaints stemmed from not being able to follow instructions with success and confidence. My ideation concentrated on giving the user all of the information they could possibly need.
Day 2 - SKETCH
Lightning Demo
Lightning Demos consist of choosing another product to study and gain inspiration. For this exercise I chose 2 different products that helped me gain insight into possible solutions to each pain point. I have mentioned qualities of each product that inspired my design for Savr.
1.) Kitchen Stories - This product inspired me to keep the image of a dish as the large and a single recipe per page while the user is browsing. It also helped me gather an idea of what should be available for each recipe; description, reviews, timing information, difficulty level, nutrition facts, ingredients, and utensils. This app also included instructional "How to" videos that teach the users new techniques.
This fast and fun sketching technique allows users to push beyond their initial idea and explore all possible solutions to a problem. First the designer chooses the most important screen from their map on day 1. This screen is the most essential to interact with in order for the user to successfully complete a task. When the screen has been chosen the designer folds a piece of paper so that there are 8 equal quadrants. They set a timer for 8 minutes and proceed to draw a solution sketch in each quadrant of the page.
1.) I chose to sketch the screen of a single step. Although it may not be as complicated as the page which would contain the entire recipe it is the most essential one to understand and interact with in order to successfully complete the dish.
2.) The goal was to fit all of the information needed for a single step onto a single page to minimize the need for scrolling or navigating around the page.
3.) My thought was that if the user could see everything in one frame then there is no need to touch your phone. This may not seem entirely necessary but it would cut down immensely on the amount of time spent transitioning from cooking to scrolling with hand washing and drying in between.
Solution Sketch
The solution sketch represents a three paneled storyboard. The middle screen is the page chosen for the Crazy 8’s Method (most critical). The solution sketch also contains the page that precedes and proceeds the most important.
The preceding screen comes after the user has chosen a recipe to cook. They are greeted with a loading page that encourages them to practice safe and healthy kitchen practices.
The center page is a refined and combined sketch of several screens created in the Crazy 8’s Method.
When the user completes a recipe (here a few screens/steps were skipped for simplicity) they are taken to a page that encourages them to leave a review and upload a photo of their finished dish.
Day 3 - DECIDE
Once day 2 is completed the designer has tons of ideas and inspiration they can work off of. On day 3 the designer is challenged to expand their 3 paneled solution sketch into a 5-15 frame storyboard. A storyboard helps give a visual representation of the steps a user takes to complete a task.
Storyboard
Explanation
The user starts out on a general browsing page where they can look through recipes with a variety of filters in place (meal: breakfast/lunch/dinner, time, dietary restrictions, and difficulty of dish).
When the user clicks on the name of a recipe they are taken to a general overview of the entire dish. This page contains the entire recipe on one screen - ingredients, kitchenware, timing, nutrition, technique tutorials, etc.
The user can choose to cook off of this screen or they can click on the CTA button which takes them to a series of screens that walks them through each step.
The goal is that an entire step fits on a single screen and there is no need for scrolling. This design is to ensure that the user is not having to wash their hands constantly.
Another supporter in this effort is the automatic loading and transition to the next stop.
If the user feels rushed or is not moving as fast as the estimated time suggests they can easily turn off the automatic transition by hitting the “X” to the left of the button. When the automatic transition turns off the user must click the button with the next step on it to proceed.
When the user is on any step after the first they are given a link to the previous step at the bottom of the page for easy navigation to and fro chronological steps.
Lastly, when the user completes a recipe they’re encouraged to rate the dish, leave a comment/review and upload an image of their final product. The user can check a box to save this recipe to their cookbook associated with the app and then can continue to their original browsing page.
Day 4 - PROTOTYPE
Screenshots
Description
I started with a general screen where the user can browse recipes and use filters to find the perfect dish for them. Once the user selects a meal to cook they are taken to the recipe. This screen contains the general and detailed info regarding the recipe. The user is welcome to start cooking from the recipe screen alone or they can interact with the step-by-step feature.
By clicking “Start Cooking” the user is taken to the first step of the recipe. First, there is a brief loading screen that encourages the user to practice healthy kitchen habits.
After 2 second the user is redirected to the first step. On this page the user is given only the necessary information in order to complete this step.
At the bottom of the page there are considerations for moving onto the next step as well as tips for success (or correction as the user gets further into the recipe). The button for the following step is set to default transition once the estimated time for the step has ended.
The user can opt out of automatic transitions by hitting the “X” to the left of the button. If auto transition is off then the user must manually click the button for the following step.
In order to not build out the entire recipe I went ahead and treated the second step as if it were the last by including a “Done!” button rather than “Step 3”. When the user has completed the last set and hits “Done!”, they are sent to a congratulatory page.
Here the user is encouraged to write a review and upload a photograph of their delicious meal. Lastly, they are given the opportunity to add this recipe to their cookbook associated with the app before signing off or browsing other recipes.
Day 5 - TEST/VALIDATE
On Day 5 I had the opportunity to interview 5 participants. I recruited family members and friends whom I know love to cook and often use their phones to try out new recipes. I was lucky enough to do a few rounds of interviewing in person and a few others via Zoom. I really enjoyed interacting with my participants in person because it eliminated a lot of technological issues overall. However, the convenience of interviewing over Zoom allowed for optimal comfort and flexibility.
Overall there were a lot of positive notes surrounding the layout, format, and features of the app but of course there were hiccups as well… On the first screen all 5 participants mentioned they liked the option to filter their search considering they had a variety of dietary restrictions amongst themselves. Unfortunately the allergy icon (hand with spots) was not obvious and created some confusion. Perhaps this icon could be as simple as an “X”.
On the second screen a few participants noted it felt busy or cluttered. The “start cooking'' button was not an obvious indicator that it would take you to a step by step sequence of the recipe. They asked why they wouldn’t be able to cook from the recipe page alone (which is definitely also possible). Once they interacted with the button they were pleased to see the “Let’s Get Started” page because it felt like a “team”/”encouraging” event was about to take place.
When they arrived at the third screen the majority mentioned the screen felt too busy and tight. I agree that there could be more spacing between sections and the ingredients section could be moved below utensils rather than beside to create more breathing room. I asked the users how this would affect their cooking experience considering they would have to scroll more and they didn’t seem to mind. One participant mentioned they can scroll with the back of their knuckle and that's how they minimize the number of times they wash their hands while cooking.
I had to explain the automatic transition button to the next step considering this low fidelity design does not include the animations that would be present in the functioning app. The participants immediately perked up when I compared it to Netflix and they thought it was a great idea to keep your hands off the screen. Their only concern with this feature is that it would keep their phone on throughout the entire process and drain their battery. They figured out the “X” to the left would shut off the automatic transition so this could be a fix if their battery is already low. A few people mentioned they liked the “Before you begin/move on'' sections because it helped them feel adequately prepared for the current and following steps. Additionally, there were positive comments regarding the picture at the end of step 1 to compare your own progress and the helpful tips for success.
Once they moved onto the next step they each felt it was obvious how to return to step 1 or move forward. When they were directed to the “all done” page a few participants mentioned that there was no way to send/save the review they write. Perhaps when they click in the form there could be a send button? It was not obvious to them that from this landing page you could return to the browse recipes screen via the bottom navigation. Perhaps adding a CTA for users to continue browsing or look at similar recipes could be a helpful way to keep the user engaged with the app once they have finished cooking.
Tidying Up UI Elements
By creating a slide filters option on the search recipe screens the user has more breathing room and a better view of the recipes presented under each filter.
Allowing the user to choose whether they would like to use automatic transitions or not gives them the control and choice to proceed in the manner they are most comfortable. The Automatic Transition button itself is an automatic transition that way it almost functions as an onboarding screen.
I updated the ingredients and utensils lists by giving them small images corresponding to the item needed. They function as a slide (left and right) if the list for a single step is longer than what can fit on a screen at a time.
Additionally by adding the “3 minutes…” text below the step 2 button we can see that this user elected to use automatic transitions. If at any point they wished to continue at their own pace they can click the X that has been moved closer to the timer.
Reflections & Next Steps
Overall I would consider this design sprint a success! Like any design it is not perfect however there is a lot of promise and excitement surrounding the automatic transition feature on this app. I really enjoyed working through this design sprint and having a set order of tasks and goal for each day. It was an exciting challenge I would like to try again someday soon!
Obviously the first step moving forward is to create a design system (color palette, iconography, imagery, UI elements) based on the brand's personality and attributes. From here I will be able to design high fidelity mock ups for further usability testing. For future iterations there is potential for hands free recipe reading which may include voice recognition and control to take the interaction between the user and device from completely tangible to partially verbal.
